<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import {
  projectItemAdd,
  projectItemFind,
  projectItemFindById,
  projectItemModify,
  projectItemRemove
} from '@/api/projectItem/projectItem'
import { Message, Modal } from '@arco-design/web-vue'
import { useGlobalStore } from '@/stores/global'
import router from '@/router'

const globalStore = useGlobalStore()

// 搜索表单
const searchForm = reactive({
  // 显示控制
  visible: true,
  // 表单
  form: {
    name: null  //项目名称
  },
  // 搜索
  search: () => {
    projectItemFind(searchForm.form,
      searchForm.list.pageSize,
      searchForm.list.pageNum
    ).then((resp: any) => {
      searchForm.list = resp.data
    })
  },
  loadNext: () => {
    if (searchForm.list.pageNum + 1 >= searchForm.list.totalPage) {
      Message.warning('已加载到底部  : )')
      return
    }
    searchForm.list.pageNum++
    searchForm.search()
  },
  // 重置
  reset: () => {
    searchForm.form = {
      name: null  //项目名称
    }
  },
  // table 数据
  list: {
    list: [],
    total: 0,
    totalPage: 0,
    pageSize: 10,
    pageNum: 1
  }
})

// 操作数据表单
const operationForm = reactive({
  // 弹框标题
  title: '添加项目管理',
  // 是否显示
  visible: false,
  // 表单
  form: {
    id: null,  //Id
    name: null,  //项目名称
    remark: null,  //备注信息
    createTime: null,  //创建时间
    createBy: null  //创建人
  },
  // 验证
  rules: {
    name: [{ required: true, message: '项目名称不能为空' }],
    createBy: [{ required: true, message: '创建人不能为空' }]
  },
  reset: () => {
    operationForm.form = {
      id: null,  //Id
      name: null,  //项目名称
      remark: null,  //备注信息
      createTime: null,  //创建时间
      createBy: null  //创建人
    }
  },
  // 打开弹框
  open: () => {
    operationForm.title = '添加项目管理'
    operationForm.visible = true
    operationForm.reset()
  },
  modify: (record: any) => {
    operationForm.title = '修改项目管理'
    operationForm.form = record
    operationForm.visible = true
  },
  remove: (record: any) => {
    Modal.confirm({
      title: '警告！',
      content: `是否确认删除 [${record.id}] 项目管理？`,
      onOk(e) {
        projectItemRemove(record.id)
      }
    })
  },
  submit: ({ errors, values }: any) => {
    if (errors) return
    if (values.id) {
      projectItemModify(operationForm.form).then(() => {
        operationForm.visible = false
        searchForm.search()
      })
      return
    }

    projectItemAdd(values).then(() => {
      operationForm.visible = false
      searchForm.search()
    })
  }
})

onMounted(() => {
  searchForm.search()
  document.title = 'Rocc管理系统 项目管理'
})

</script>

<template>
  <div class="w-full h-full">

    <!-- 搜索表单 -->
    <a-form v-show="searchForm.visible">
      <a-row :gutter="10">
        <a-col :sm="12" :md="7">
          <a-form-item label="项目名称">
            <a-input v-model="searchForm.form.name" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-space>
            <a-button @click="searchForm.search">
              <template #icon>
                <icon-search />
              </template>
              搜索
            </a-button>
            <a-button @click="searchForm.reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>
    <!-- 搜索表单end -->


    <!-- 功能区域 -->
    <div class="flex justify-between mr-1">
      <a-space wrap>
        <a-button type="primary" @click="operationForm.open">
          <template #icon>
            <icon-plus />
          </template>
          添加项目管理
        </a-button>
        <a-button>
          <template #icon>
            <icon-download />
          </template>
          导出项目管理
        </a-button>
      </a-space>
      <a-space>
        <a-tooltip content="刷新列表" @click="searchForm.search" position="tr">
          <a-button size="small" shape="circle">
            <template #icon>
              <icon-refresh />
            </template>
          </a-button>
        </a-tooltip>

        <a-tooltip content="隐藏搜索" position="tr" @click="searchForm.visible = !searchForm.visible">
          <a-button size="small" shape="circle">
            <template #icon>
              <icon-search />
            </template>
          </a-button>
        </a-tooltip>

      </a-space>
      <!-- 功能区域end -->
    </div>

    <!-- 表单区域 -->
    <a-drawer v-model:visible="operationForm.visible" :title="operationForm.title" :width="500" :footer="false">
      <a-form ref="operationFormRef" :model="operationForm.form" @submit="operationForm.submit"
              :rules="operationForm.rules">
        <a-form-item hide-asterisk label="项目名称" field="name" validate-trigger="blur">
          <a-input v-model="operationForm.form.name" />
        </a-form-item>

        <a-form-item hide-asterisk label="备注信息" field="remark" validate-trigger="blur">
          <a-textarea v-model="operationForm.form.remark" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>

    <a-list :grid-props="{gutter: 0, span: 6,sm:24,md:12,lg:8,lx:6}" :data="searchForm.list.list" class="border-none"
            max-height="600px" @reachBottom="searchForm.loadNext">
      <template #item="{item}">
        <a-card class="m-3">
          <template #title>
            <a-link class="font-600" @click="router.push({path:'/taskProgress',query:{id: item.id,name:item.name}})">
              {{ item.name }}
            </a-link>
          </template>
          <template #extra>
            <a-button type="text" status="warning" @click="operationForm.modify(item)" size="mini">
              <template #icon>
                <icon-edit />
              </template>
              修改
            </a-button>
            <a-button type="text" status="danger" @click="operationForm.remove(item)" size="mini">
              <template #icon>
                <icon-delete />
              </template>
              删除
            </a-button>
          </template>
          {{ item.remark }}
          <a-card-meta>
            <template #avatar>
              <a-space>
                <a-tag>
                  创建人： {{ globalStore.global.caches.database.system_user[item.createBy] }}
                </a-tag>
                <a-tag>
                  创建时间：{{ item.createTime }}
                </a-tag>
              </a-space>
            </template>
          </a-card-meta>
        </a-card>
      </template>
    </a-list>


    <!--    <a-table :data="searchForm.list.list" :pagination="false">
          <template #columns>
            <a-table-column title="Id" data-index="id" />
            <a-table-column title="项目名称" data-index="name" />
            <a-table-column title="备注信息" data-index="remark" />
            <a-table-column title="创建时间" data-index="createTime" />
            <a-table-column title="创建人" data-index="createBy">
              <template #cell="{record}">
                {{ globalStore.global.caches.database.system_user[record.createBy] }}
              </template>
            </a-table-column>
            <a-table-column title="操作" width="160">
              <template #cell="{record}">
                <a-space>
                  <a-button status="warning" @click="operationForm.modify(record)">
                    <template #icon>
                      <icon-edit />
                    </template>
                    修改
                  </a-button>
                  <a-button status="danger" @click="operationForm.remove(record)">
                    <template #icon>
                      <icon-delete />
                    </template>
                    删除
                  </a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <div class="mt-4 flex justify-end">
          <a-pagination v-model:current="searchForm.list.pageNum"
                        v-model:page-size="searchForm.list.pageSize"
                        :total="searchForm.list.total"
                        @change="searchForm.search"
                        show-total
                        show-jumper
                        show-page-size
          ></a-pagination>
        </div>-->
  </div>
</template>

<style scoped>

</style>
